<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas {
        position: fixed;
        left: 0;
        top: 0;
        background: #222;
    }
</style>

<body>
    <canvas></canvas>
</body>
<script>
    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d')
    var count = 0

    function init() {
        canvas.width = window.innerWidth * devicePixelRatio
        canvas.height = window.innerHeight * devicePixelRatio
    }

    function getRodom(max) {
        return Math.floor(Math.random() * max) - 5
    }

    class Point {
        constructor(x, y, spandX, spandY) {
            this.x = x;
            this.y = y;
            this.spandX = spandX;
            this.spandY = spandY;
        }
        draw() {
            // console.log('draw', this.x, this.y)
            ctx.beginPath()
            ctx.arc(this.x * devicePixelRatio, this.y * devicePixelRatio, 3, 0, 2 * Math.PI)
            ctx.strokeStyle = '#fff'
            ctx.fillStyle = '#fff'
            ctx.stroke()
            ctx.fill()
        }
    }

    function drawLine(startX, startY, targetX, targetY) {
        ctx.beginPath()
        ctx.moveTo(startX * devicePixelRatio, startY * devicePixelRatio)
        ctx.lineTo(targetX * devicePixelRatio, targetY * devicePixelRatio)
        ctx.closePath()
        ctx.strokeStyle = '#fff'
        ctx.stroke()
    }

    function draw() {
        ctx.beginPath()
        ctx.moveTo(100, 50)
        ctx.lineTo(200, 100)
        ctx.closePath()
        ctx.strokeStyle = '#fff'
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(100, 50, 3, 0, 2 * Math.PI)
        ctx.stroke()
    }

    init()

    const points = []
    function drawGraph() {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
        if (count === 0) {
            for (let i = 0; i < 100; i++) {
                const p = new Point(getRodom(window.innerWidth), getRodom(window.innerHeight), getRodom(10), getRodom(10))
                points.push(p)
            }
        } else {
            points.forEach(item => {
                item.x += item.spandX
                item.y += item.spandY
                if (item.x > window.innerWidth) {
                    item.spandX = -item.spandX
                }

                if (item.x < 0) {
                    item.spandX = -item.spandX
                }

                if (item.y > window.innerHeight) {
                    item.spandY = -item.spandY
                }

                if (item.y < 0) {
                    item.spandY = -item.spandY
                }
            })
        }

        // for (let i = 0; i < points.length - 1; i++) {
        //     points[i].draw(points[i].x, points[i].y)
        //     drawLine(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y)
        // }

        points.forEach(item => {
            item.draw(item.x, item.y)
            points.forEach(node => {
                const d = Math.sqrt((node.x - item.x) ** 2 + (node.y - item.y) ** 2)
                console.log(d)
                if (d < 150) {
                    drawLine(item.x, item.y, node.x, node.y)
                }
            })
        })
        count++;
        requestAnimationFrame(drawGraph)
    }

    drawGraph()

</script>

</html>